<template>
    <div>

        <div ref="chart" style="width: 100%; height: 400px;">

        </div>


        <el-row>
            <el-col :span="24">
                <div>
                    <el-table :data="tableData" style="width: 100%; margin-top: 10px; padding-top: 0px;">
                        <el-table-column prop="id" label="订单号" width="180">
                            <template slot-scope="scope">
                                <el-link type="primary">
                                    {{ scope.row.id }}
                                </el-link>
                            </template>
                        </el-table-column>
                       
                        <el-table-column label="始发地" width="180">
                            <template v-slot="scope">
                                <div>
                                    <span>{{ scope.row.dpaProvince }}</span>/
                                    <span>{{ scope.row.dpaCity }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="目的地" width="180">
                            <template v-slot="scope">
                                <div>
                                    <span>{{ scope.row.cdaProvince }}</span>/
                                    <span>{{ scope.row.cdaCity }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="客(用)户名称" width="180"></el-table-column>
                        <el-table-column label="订单状态" width="180">
                            <template v-slot="scope">
                                <span>
                                    <span v-if="scope.row.orderStatus == 0">待分配</span>
                                    <span v-else-if="scope.row.orderStatus == 1">待调度</span>
                                    <span v-else-if="scope.row.orderStatus == 2">运输中</span>
                                    <span v-else-if="scope.row.orderStatus == 3">已签收</span>
                                    <span v-else-if="scope.row.orderStatus == 4">已拒绝</span>
                                    <span v-else-if="scope.row.orderStatus == 5">已取消</span>
                                    <span v-else-if="scope.row.orderStatus == 6">待提货</span>
                                    <span v-else>未知状态</span>
                                </span>
                            </template>
                        </el-table-column>
                    
                      
                        <el-table-column label="货物类型" width="180">
                            <template v-slot="scope">
                                <span v-if="scope.row.goodsType == 0">日用品</span>
                                <span v-else-if="scope.row.goodsType == 1">食品</span>
                                <span v-else-if="scope.row.goodsType == 2">文件</span>
                                <span v-else-if="scope.row.goodsType == 3">家具</span>
                                <span v-else-if="scope.row.goodsType == 4">其他</span>
                                <span v-else>未知类型</span>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column prop="goodsCount" label="货物数量" width="180"></el-table-column>
                        <el-table-column prop="allVolume" label="总体积" width="180"></el-table-column>
                        <el-table-column prop="allWeight" label="总重量" width="180"></el-table-column> -->
                        <el-table-column prop="totalFee" label="运费合计" width="180"></el-table-column>
                        
                    </el-table>
                </div>
            </el-col>
        </el-row>


        <el-row>
            <el-col :span="24">
                <el-pagination background :page-sizes="[1, 5, 10, 20, 30, 50]" :page-size="pageSize"
                    :current-page="pageNum" :total="total" layout="total,sizes,prev, pager, next,jumper"
                    @next-click="nextPage" @prev-click="prevPage" @current-change="changePage"
                    @size-change="sizeChange">
                </el-pagination>
            </el-col>
        </el-row>


    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    data() {
        return {
            pageSize: 5,
            pageNum: 1,
            total: 0,
            tableData: [],//表格对象



            chart: null,
            orders: [], // 存储订单数据
        };
    },
    mounted() {
        this.initChart();
        this.fetchOrderData(); // 获取订单数据
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs.chart);
            const option = {
                title: {
                    text: '订单趋势',
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    name: '日期',
                },
                yAxis: {
                    type: 'value',
                    name: '订单数量',
                },
                series: [
                    {
                        name: '订单数量',
                        type: 'bar',
                        data: [],
                    },
                ],
            };
            this.chart.setOption(option);
        },
        fetchOrderData() {
            // 模拟获取数据，你可以替换为真实的 API 请求
            const orderData = [
                { date: '2024-10-25', quantity: 5 },
                { date: '2024-10-26', quantity: 15 },
                { date: '2024-10-27', quantity: 10 },
                { date: '2024-10-28', quantity: 20 },
                { date: '2024-10-29', quantity: 8 },
            ];

            this.orders = orderData;
            this.updateChart();
        },
        updateChart() {
            const dates = this.orders.map(order => order.date);
            const quantities = this.orders.map(order => order.quantity);
            this.chart.setOption({
                xAxis: {
                    data: dates,
                },
                series: [
                    {
                        name: '订单数量',
                        data: quantities,
                    },
                ],
            });
        },



        queryAll() {
            let pageParam = {};
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            pageParam.param = this.param;
            this.$axios.post('api/order/queryCustomerOrder', pageParam)
                .then(resp => {
                    console.log(resp.data);
                    if (resp.data.code === 200) {
                        this.tableData = resp.data.data.list
                        this.total = resp.data.data.total
                    }

                })
                .catch(error => {
                    console.error('操作失败:', error);
                    this.$message.error('网络请求失败，请稍后再试');
                });
        },



        nextPage(val) {//当前页
            //下一页
                this.pageNum = val
                // 客户订单标签页被点击
                this.queryAll();
  
        },
        prevPage(val) {//当前页
            //上一页
                this.pageNum = val
                // 客户订单标签页被点击
                this.queryAll();
        },
        changePage(val) {
            //跳转页
                this.pageNum = val
                // 客户订单标签页被点击
                this.queryAll();
        },
        sizeChange(val) {
            //改变每页条数
                this.pageNum = 1
                this.pageSize = val
                // 客户订单标签页被点击
                this.queryAll();
        },

    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.dispose();
        }
    },

    created() {
        this.queryAll();
    }
};
</script>

<style scoped></style>